<template>
  <!-- 问卷类型容器 -->
  <div class="content_content">
    <div class="content_content_heder">
      <template v-if="editTitle && edit">
        <CKEidtor :editorData="questionaire.queTitle" @onChange="onChange" />
      </template>

      <template v-else>
        <!-- {{ questionaire.queTitle }} -->
        <div
          class="edit_title"
          @click="changeEdit(true)"
          @blur="changeEdit(false)"
          v-html="questionaire.queTitle"
        ></div>
      </template>

      <template v-if="editTips && edit">
        <CKEidtor
          :editorData="questionaire.explanation"
          @onChange="onChange2"
        />
      </template>

      <template v-else>
        <div
          class="edit_tips"
          @click="changeEdit2(true)"
          @blur="changeEdit2(false)"
          v-html="questionaire.explanation"
        ></div>
      </template>
    </div>

    <template v-for="item in contentList" :key="item.questNum">
      <!-- 分发题型组件 -->
      <ExamDistribute
        :examList="examList"
        :exam="item"
        @handleExam="handleExam"
      />
    </template>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import ExamDistribute from '@/components/design/ExamDistribute.vue';
import { ExamItem, Questionaire } from '@/store/design/types';
import CKEidtor from '@/components/type-of-exam/common/edit-common/CKEidtor.vue';

export default defineComponent({
  components: { ExamDistribute, CKEidtor },
  props: {
    /** 题列表 */
    contentList: { type: Array, default: () => [] },
    /** 问卷信息 */
    questionaire: { type: Questionaire, default: new Questionaire() },
    /** 题目列表 */
    examList: { type: Array, default: () => [] },
    edit: { type: Boolean, default: true },
  },
  emits: [
    /** 点击某个题目进入编辑状态 */
    'handleExam',
  ],
  setup(props, { emit }) {
    const handleExam = (value: ExamItem) => {
      emit('handleExam', value);
      editTitle.value = false;
      editTips.value = false;
    };
    const onChange = (value: string) => {
      props.questionaire.queTitle = value;
    };

    // const disEdit = 'answer' | 'statistics';

    const editTitle = ref<boolean>(false);

    const changeEdit = (value: boolean) => {
      if (
        (props.contentList as ExamItem[]).some(
          (item) => item.status === 'answer' || item.status === 'statistics',
        )
      )
        return;
      editTitle.value = value;
      if (value) {
        editTips.value = false;
        emit('handleExam', new ExamItem());
      }
    };

    const editTips = ref<boolean>(false);

    const onChange2 = (value: string) => {
      props.questionaire.explanation = value;
    };

    const changeEdit2 = (value: boolean) => {
      if (
        (props.contentList as ExamItem[]).some(
          (item) => item.status === 'answer' || item.status === 'statistics',
        )
      )
        return;
      editTips.value = value;

      if (value) {
        editTitle.value = false;
        emit('handleExam', new ExamItem());
      }
    };

    return {
      handleExam,
      onChange,
      editTitle,
      changeEdit,
      editTips,
      onChange2,
      changeEdit2,
    };
  },
});
</script>
<style lang="less" scoped>
.edit_title {
  font-size: 30px;
  font-weight: border;
  text-align: center;
  line-height: 30px;
  padding: 24px 24px 12px;
}

.edit_tips {
  font-size: 14px;
  font-weight: border;
  text-align: center;
  line-height: 14px;
  padding: 12px 0 24px 0;
}
</style>
